<template>
  <el-dialog
    v-dialogDrag
    title="用户分配"
    :visible.sync="userShow"
    width="60%"
    length="100%"
    :before-close="close"
  >
    <el-form :inline="true">
      <el-form-item label="用户名称：">
        <el-input v-model="userQuery.name" placeholder="请输入用户名称" />
      </el-form-item>
      <el-button
        style="margin-left: 5px"
        type="primary"
        @click="queryUserByName"
      >查询</el-button>
    </el-form>
    <el-table
      ref="userTable"
      v-loading="loading"
      :data="userData"
      selectable
      highlight-current-row
      height="350"
      style="width: 100%"
      @select="handleSelectionChange"
    >
      <el-table-column type="selection" />
      <el-table-column label="用户工号" align="center" prop="code" />
      <el-table-column label="用户名" align="center" prop="name" />
      <el-table-column label="公司" align="center" prop="company.name" />
      <el-table-column label="部门" align="center" prop="departmentVO.name" />
    </el-table>
    <!-- 分页条-->
    <el-pagination
      :v-model="userPage"
      :current-page.sync="userPage.pageNum"
      :page-size="userPage.pageSize"
      :page-sizes="userPage.pageSizes"
      layout="total, sizes, prev, pager, next, jumper"
      :total="userPage.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <span slot="footer">
      <el-button
        style="margin-left: 30px"
        @click="close"
      >取 消</el-button>
      <el-button type="primary" @click="userAdd">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { commonQueryUser, assignUser } from '../../../api/right/role'
export default {
  name: 'UserDialog',
  props: {
    selections: Array, // 已选择数据
    userTitle: String, // 弹窗标题
    userShow: Boolean, // 是否显示
    userClose: Function, // 关闭函数
    userClick: Function // 确认函数
  },
  data() {
    return {
      loading: true, // 加载中
      userData: [], // 用户数据
      userQuery: {}, // 查询传参
      multipleSelection: [], // 选择器
      roleIdList: [], // 角色id
      userIdList: [], // 用户id
      userPage: { // 用户表页码
        total: null,
        pageNum: 1, // 页号
        pageSize: 15, // 页大小
        pageSizes: [15, 30, 50, 100], // 页大小选择
        pages: null
      }
    }
  },
  mounted() {
    this.onshow()
  },
  methods: {
    // 初始化
    onshow() {
      const roleVo = this.selections
      for (let i = 0; i < roleVo.length; i++) {
        this.roleIdList.push(roleVo[i].id)
      }
      this.getUser(this.userPage.pageNum)
    },
    // 获取用户数据
    getUser(pageNum) {
      this.loading = true
      this.userQuery.total = this.userPage.total
      this.userQuery.pageNum = pageNum
      this.userQuery.pageSize = this.userPage.pageSize
      console.log(this.userQuery)
      commonQueryUser(this.userQuery)
        .then((response) => {
          const { total, pageNum, pageSize, pages } = response // 如果异常则被axios 的拦截器拦截并且显示错误码和消息
          this.userPage.total = parseInt(total)
          this.userPage.pages = parseInt(pages)
          this.userData = response.data
          console.log(this.userData)
          setTimeout(() => {
            this.loading = false
          }, 1.5 * 1000)
        })
        .catch(() => {
          this.loading = false
        })
    },
    // 记忆选中表格的checkbox
    toggleSelection() {
      setTimeout(() => {
        this.userData.forEach((user) => {
          this.multipleSelection.forEach((selected) => {
            if (user.id === selected.id) {
              this.$refs.userTable.toggleRowSelection(user, true)
            }
          })
        })
      }, 500)
      console.log(this.multipleSelection)
    },
    queryUserByName() {
      this.userPage.total = null
      this.userPage.pages = null
      this.userPage.pageNum = 1
      this.getUser(this.userPage.pageNum)
    },
    // 更改页大小
    handleSizeChange(val) {
      this.userPage.pageSize = val
      this.getUser(this.userPage.pageNum)
      this.toggleSelection()
    },
    // 跳转页码
    handleCurrentChange(val) {
      this.getUser(val)
      this.toggleSelection()
      console.log(this.multipleSelection)
    },
    // 选择用户
    handleSelectionChange(val, row) {
      this.multipleSelection.push(row)
    },
    // 分配用户
    userAdd() {
      const roleVo = this.selections
      const userVo = this.multipleSelection
      console.log(userVo)
      if (userVo == null || userVo.length === 0) {
        this.$message.error('至少选择一个用户进行操作')
        return
      }
      for (let i = 0; i < roleVo.length; i++) {
        this.roleIdList.push(roleVo[i].id)
      }
      for (let i = 0; i < userVo.length; i++) {
        this.userIdList.push(userVo[i].id)
      }
      console.log(this.roleIdList)
      const userRoleDTO = {
        roleIds: this.roleIdList,
        userIds: this.userIdList
      }
      assignUser(userRoleDTO)
        .then((response) => {
          this.$message({
            message: '分配成功',
            type: 'success'
          })
          this.userIdList = []
          this.roleIdList = []
        })
        .catch(() => {
          this.$message({
            message: '分配失败',
            type: 'error'
          })
        })
        .finally(() => {
          this.multipleSelection = []
          this.userClick()
        })
    },
    // 关闭、取消函数
    close() {
      this.multipleSelection = []
      this.userClose()
    }
  }
}
</script>
